<template>
  <view class="page">
    <view class="headPart w-full flex justify-center">
      <view class="f-s-40 fw-600">线上商城</view>
    </view>
    <view class="carousel mx24">
      <carousel :swiperList="swiperList"></carousel>
    </view>
    <view class="blockPart flex justify-between align-center mx24 bg-white">
      <view
        class="blockItem flex flex-column justify-center align-center"
        v-for="(item, index) in blockList"
        :key="index"
      >
        <image :src="item.img" :class="item.className" mode="scaleToFill" />
        <view class="f-s-28 col-565 mt20">{{ item.label }}</view>
      </view>
    </view>
    <view class="benefitPart flex justify-between">
      <view
        class="benefitList"
        v-for="(item, index) in benefiList"
        :key="index"
      >
        <view class="benefHead col-white f-s-24" :class="'col' + index">{{
          item.title
        }}</view>
        <view class="smallTitle f-s-22">{{ item.smallTitle }}</view>
        <view class="imgPart flex justify-center align-center"
          ><image :src="item.img" class="benefImg" mode="scaleToFill"
        /></view>
      </view>
    </view>
    <view class="goodsList">
      <comprehensive :tyepId="543"></comprehensive>
    </view>
    <custom-tabbar :selected="1" @change="onTabChange" />
  </view>
</template>
<script>
import customTabbar from "@/components/custom-tabbar.vue";
import cardModule from "./components/cardModule.vue";
import carousel from "./components/carousel.vue";
import comprehensive from "@/components/comprehensive";
import { mapGetters } from "vuex";
export default {
  components: {
    // dataStatistics,
    customTabbar,
    cardModule,
    carousel,
    comprehensive,
  },
  computed: mapGetters(["isLogin"]),
  data() {
    return {
      swiperList: [
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/homeBanner1.png",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/homeBanner2.png",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/homeBanner3.png",
        },
        {
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/homeBanner4.png",
        },
      ],
      benefiList: [
        {
          title: "走地鸡",
          smallTitle: "野生土鸡",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/retainedFluid.png",
        },
        {
          title: "海运",
          smallTitle: "",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/retainedFluid.png",
        },
        {
          title: "海天",
          smallTitle: "百年品质",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/retainedFluid.png",
        },
        {
          title: "东北滋补",
          smallTitle: "药膳养生必备",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/retainedFluid.png",
        },
      ],
      blockList: [
        {
          label: "干货调味",
          className: "drySeason",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/drySeason.png",
        },
        {
          label: "肉禽蛋品",
          className: "eggProducts",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/eggProducts.png",
        },
        {
          label: "水产海鲜",
          className: "seafood",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/seafood.png",
        },
        {
          label: "有机食品",
          className: "organic",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/organic.png",
        },
        {
          label: "营养滋补",
          className: "nutrition",
          img: "https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/thirdParty/nutrition.png",
        },
      ],
    };
  },
  mounted() {},
  onShow() {
    // 获取自定义 tabBar 实例并更新选中项
    // this._data.currentIndex = 0;
    // if (typeof this.getTabBar === "function" && this.getTabBar()) {
    //   this.getTabBar().setData({
    //     currentIndex: 0, // 首页对应 list 的索引
    //   });
    // }
  },
  methods: {
    adjust(data) {
      this.benefiList.forEach((item) => {
        if (item.img === data.img) {
          item.active = true;
        } else {
          item.active = false;
        }
      });
    },
    onTabChange(index) {
      // 可以在这里处理 Tab 切换的逻辑
    },
    /**
     * 用户点击右上角分享
     */
    // #ifdef MP
    onShareAppMessage: function () {
      let path = "";
      path = `/pages/index/index`;
      return {
        title: "测试",
        imageUrl: "",
        desc: "备注",
        path,
      };
    },
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: 120rpx;
  .headPart {
    width: 100% !important;
    padding: 105rpx 24rpx 34rpx 24rpx;
  }
  .mx24 {
    margin: 0rpx 24rpx;
  }
  .blockPart {
    padding: 18rpx 30rpx 34rpx 30rpx;
    border-radius: 22rpx;
    .drySeason {
      width: 100rpx;
      height: 108rpx;
    }
    .eggProducts {
      width: 104rpx;
      height: 108rpx;
    }
    .seafood {
      width: 118rpx;
      height: 108rpx;
    }
    .organic {
      width: 118rpx;
      height: 108rpx;
    }
    .nutrition {
      width: 104rpx;
      height: 108rpx;
    }
  }
}
.benefitPart {
  margin: 28rpx 24rpx 0rpx 24rpx;
}
.benefitList {
  width: 23%;
  height: 245rpx;
  background: #ffffff;
  border-radius: 14rpx;
  position: relative;
  .benefHead {
    border-radius: 14rpx 14rpx 0rpx 0rpx;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
  }
  .smallTitle {
    text-align: center;
    margin-top: 12rpx;
    color: #656565;
  }
  .imgPart {
    width: 100%;
    position: absolute;
    bottom: 12rpx;
  }
  .benefImg {
    margin-top: 20rpx;
    width: 130rpx;
    height: 130rpx;
  }
}
.col-565 {
  color: #656565;
}
.mt30 {
  margin-top: 30rpx;
}
.mb6 {
  margin-bottom: 6rpx;
}
.col0 {
  background: #3f72e7;
}
.col1 {
  background: #81d447;
}
.col2 {
  background: #f33b43;
}
.col3 {
  background: #eb9a2b;
}
</style>
